<template>
  <ul class="todo-main">
      <TodoItem v-for="td in todos" :key="td.id" :todoObj="td"/>
  </ul>
</template>

<script>
  import TodoItem from './TodoItem.vue'
  export default {
      name: 'TodoList',
      components: {
          TodoItem
      },
      data() {
          return {
              // todos:[// 放在这里, 不方便兄弟组件之间的通信, 所以考虑放在父组件中
              //     {id:1, title:'吃饭', completed:true},
              //     {id:2, title:'睡觉', completed:false},
              //     {id:3, title:'打豆豆', completed:true}
              // ]
          }
      },
      props: ['todos']
  }
</script>

<style>
  /*main*/
  .todo-main {
        margin-left: 0px;
        border: 1px solid #ddd;
        border-radius: 2px;
        padding: 0px;
    }

    .todo-empty {
    height: 40px;
    line-height: 40px;
    border: 1px solid #ddd;
    border-radius: 2px;
    padding-left: 5px;
    margin-top: 10px;
    }
</style>